<template>
  <div class="txjl_box">
    <div class="txjl_tk">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>

      <div class="head_search">
        <div class="sele">
          <!-- <a-range-picker @change="onChange" /> -->
          <a-range-picker
            :disabled-time="disabledRangeTime"
            :show-time="{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      }"
            style="width:415px"
            @change="onChange"
            format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
      </div>
      <div class="total_price">总金额：{{total_price}}</div>
      <a-table
        @change="getwithdrawalList"
        :loading="loading"
        :dataSource="txjldata"
        :pagination="pagination"
        :columns="columns"
      ></a-table>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import moment from "moment";
const columns = [
  {
    title: "提现时间",
    dataIndex: "datetime",
    scopedSlots: { customRender: "datetime" }
  },
  {
    title: "金额",
    dataIndex: "price",
    scopedSlots: { customRender: "price" }
  }
];
export default {
  data() {
    return {
      txjldata: [],
      columns,
      loading: false,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      total_price:""
    };
  },

  methods: {
    moment,

    getwithdrawalList(pagination, startTime, endTime) {
      this.axios
        .post(
          "wxpay/withdrawalList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$parent.txjlval.sqdwid,
            startTime: startTime,
            endTime: endTime
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.total_price = res.data.result.total_price;
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.txjldata = res.data.result.data;
          } else {
            this.txjldata = [];
          }
        });
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      this.getwithdrawalList(this.pagination, dateString[0], dateString[1]);
    },

    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    close() {
      this.$parent.txjltkflg = false;
    },

    disabledRangeTime(_, type) {
      if (type === "start") {
        return {
          disabledHours: () => this.range(0, 24).splice(24, 4),
          disabledMinutes: () => this.range(60, 60),
          disabledSeconds: () => [55, 56]
        };
      }
      return {
        disabledHours: () => this.range(0, 24).splice(24, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56]
      };
    }
  },

  created() {
    this.getwithdrawalList(this.pagination);
  }
};
</script>

<style lang='less'>
.txjl_box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);

  .txjl_tk {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    // height: 200px;
    background: #fff;
    padding: 40px 50px;
    .head_search {
      padding: 10px 0;
      text-align: right;
    }
    .total_price {
    text-align: right;
    padding: 10px 0;
    color: #007cee;
    font-size: 16px;
  }
  }
  
}
</style>
